<template>
    <div class="container">
        <!-- 上方Logo Start -->
        <div class="logo">
            <img src="../assets/images/logo.png" />
            <span>矿小言</span>
        </div>
        <!-- 上方Logo End -->

        <!-- 创建新对话按钮 Start -->
        <div class="newChatButton">
            <el-button type="primary" size="default" style="width: 100%" @click="startNewChat">开始新对话</el-button>
        </div>
        <!-- 创建新对话按钮 End -->

        <!-- 聊天选项卡 Start -->
        <div class="chats">
            <div class="session flex" v-for="x in tabs" key="x.uuid" :class="{ active: x.uuid === active }"
                @click="pickTab(x.uuid)">
                <div class="title">
                    <span>{{ x.title }}</span>
                </div>
                <div class="time flex flex-x-between">
                    <span>{{ formattedTime(x.uuid) }}</span>
                    <div class="btn-box" v-if="x.uuid === active">
                        <span class="btn delete" @click.stop="delTab(x.uuid)"><el-icon>
                                <Delete />
                            </el-icon></span>
                    </div>
                </div>
            </div>
        </div>
        <!-- 聊天选项卡 End -->

        <!-- 工具栏 Start -->
        <div class="optionBar">
            <div class="options">
                <div v-if="admin" class="option" @click="goTo('/management')">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M10 6H5C4.44772 6 4 6.44772 4 7V19C4 19.5523 4.44772 20 5 20H19C19.5523 20 20 19.5523 20 19V14"
                            stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                        <path
                            d="M20 4C20 2.89543 19.1046 2 18 2H14C13.4477 2 13 2.44772 13 3C13 3.55228 13.4477 4 14 4H17.5858L12.2929 9.29289C11.9024 9.68342 11.9024 10.3166 12.2929 10.7071C12.6834 11.0976 13.3166 11.0976 13.7071 10.7071L20 4.41421V8C20 8.55228 20.4477 9 21 9C21.5523 9 22 8.55228 22 8V4C22 2.89543 21.1046 2 20 2Z"
                            stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>
                    <div class="red-dot-wrapper">知识库管理</div>
                </div>
                <div class="divider">
                    <div class="border"></div>
                </div>
                <div class="option" @click="goTo('/graph')">
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" t="1728494425879"
                        class="icon" viewBox="0 0 1042 1024" version="1.1" p-id="1503" width="203.515625" height="200">
                        <path
                            d="M276.018643 825.139306l-33.673744-33.673744 125.149663-124.619368 33.673745 33.673744z m-86.96841 160.679441a130.717763 130.717763 0 1 1 130.717763-130.717763 130.717763 130.717763 0 0 1-130.717763 130.717763z m0-47.726567A83.256344 83.256344 0 1 0 106.059037 855.100984a83.256344 83.256344 0 0 0 82.991196 82.991196z m5.568099-390.297255l12.19679-46.135681 164.391507 38.976696-12.19679 46.135681z m-76.892801 57.27188a106.059037 106.059037 0 1 1 106.059037-106.059037 106.059037 106.059037 0 0 1-106.059037 106.059037z m0-47.461419a59.393061 59.393061 0 1 0-59.393061-59.393061A59.127913 59.127913 0 0 0 117.725531 556.809943z m450.750906-307.306059l47.196271 7.158985-38.711548 208.671155-46.665976-7.158985z m259.314345 541.69653l-31.022268 36.32522-154.315899-125.414811 31.022268-36.060072zM598.172967 296.965303a130.717763 130.717763 0 1 1 130.717763-130.717763 130.717763 130.717763 0 0 1-130.717763 130.717763z m0-47.461419a83.256344 83.256344 0 1 0-82.991196-83.256344 83.256344 83.256344 0 0 0 82.991196 83.256344zM901.501813 1009.151735a130.98291 130.98291 0 1 1 132.573795-130.717763 130.717763 130.717763 0 0 1-132.573795 130.717763z m0-47.726567a83.256344 83.256344 0 1 0-82.991197-82.991196A82.991196 82.991196 0 0 0 901.501813 961.425168z m-379.426205-190.110823a178.444329 178.444329 0 1 1 178.44433-178.444329 178.444329 178.444329 0 0 1-178.44433 178.444329z m0-47.461419a130.98291 130.98291 0 1 0-130.717762-130.98291 130.98291 130.98291 0 0 0 130.717762 130.98291z"
                            p-id="1504" fill="#d81e06" />
                    </svg>
                    <div class="option-text red-dot-wrapper">CUMT 知识图谱</div>
                </div>
                <div class="divider">
                    <div class="border"></div>
                </div>
                <div class="option" @click="goTo('/docs')">
                    <svg t="1715779130816" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="46279" width="200" height="200">
                        <path
                            d="M833.4 911.3H619.1c-43 0-77.9-34.9-77.9-77.9V619.1c0-43 34.9-77.9 77.9-77.9h214.3c43 0 77.9 34.9 77.9 77.9v214.3c0 43-34.9 77.9-77.9 77.9z m19.5-272.7c0-21.5-17.4-39-39-39H638.6c-21.5 0-39 17.4-39 39v175.3c0 21.5 17.4 39 39 39h175.3c21.5 0 39-17.4 39-39V638.6z m-19.5-155.8H619.1c-43 0-77.9-34.9-77.9-77.9V190.6c0-43 34.9-77.9 77.9-77.9h214.3c43 0 77.9 34.9 77.9 77.9v214.3c0 43-34.9 77.9-77.9 77.9z m19.5-272.7c0-21.5-17.4-39-39-39H638.6c-21.5 0-39 17.4-39 39v175.3c0 21.5 17.4 39 39 39h175.3c21.5 0 39-17.4 39-39V210.1z m-448 701.2H190.6c-43 0-77.9-34.9-77.9-77.9V619.1c0-43 34.9-77.9 77.9-77.9h214.3c43 0 77.9 34.9 77.9 77.9v214.3c0 43-34.9 77.9-77.9 77.9z m19.4-272.7c0-21.5-17.4-39-39-39H210.1c-21.5 0-39 17.4-39 39v175.3c0 21.5 17.4 39 39 39h175.3c21.5 0 39-17.4 39-39V638.6z m-19.4-155.8H190.6c-43 0-77.9-34.9-77.9-77.9V190.6c0-43 34.9-77.9 77.9-77.9h214.3c43 0 77.9 34.9 77.9 77.9v214.3c0 43-34.9 77.9-77.9 77.9z m19.4-272.7c0-21.5-17.4-39-39-39H210.1c-21.5 0-39 17.4-39 39v175.3c0 21.5 17.4 39 39 39h175.3c21.5 0 39-17.4 39-39V210.1z"
                            fill="#0066FF" p-id="46280"></path>
                    </svg>
                    <div class="option-text red-dot-wrapper">文件上传</div>
                </div>
                <div class="divider">
                    <div class="border"></div>
                </div>
                <div class="option" @click="goTo('/tools')">
                    <svg t="1715778725229" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="15387" width="200" height="200">
                        <path
                            d="M886.298 636.832654v91.264683L512 944.199802 137.702 728.097337V295.902663L512 79.800198l374.298 216.102465v87.870457h69.104798v-127.770556L512 0 68.597202 256.002564v511.994872l443.402798 256.002564 443.402798-256.002564V636.832654h-69.104798z"
                            fill="#C21B17" p-id="15388"></path>
                        <path d="M512.020509 513.377174l-33.352627-57.768494 195.337185-112.778537 33.353653 57.768493z"
                            fill="#C21B17" p-id="15389"></path>
                        <path d="M478.662754 455.605604h66.705255v225.557075h-66.705255z" fill="#C21B17" p-id="15390">
                        </path>
                        <path d="M317.928215 398.931261l33.352627-58.034084 196.234451 112.778538-33.352628 58.034084z"
                            fill="#C21B17" p-id="15391"></path>
                    </svg>
                    <div class="option-text">对话模式</div>
                </div>
                <div class="divider">
                    <div class="border"></div>
                </div>
                <div class="option" @click="goTo('/setting')">
                    <svg t="1715778956860" class="icon" viewBox="0 0 1131 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="38231" width="200" height="200">
                        <path
                            d="M735.663158 107.789474c45.810526 0 91.621053 21.557895 115.873684 61.978947l164.378947 272.168421c26.947368 43.115789 26.947368 97.010526 0 137.431579l-164.378947 272.168421c-24.252632 40.421053-67.368421 64.673684-115.873684 64.673684H396.126316c-45.810526 0-91.621053-24.252632-115.873684-64.673684l-164.378948-269.473684c-26.947368-43.115789-26.947368-97.010526 0-137.431579l164.378948-272.168421c24.252632-40.421053 67.368421-64.673684 115.873684-64.673684h339.536842z m0-83.536842H396.126316c-75.452632 0-145.515789 40.421053-185.936842 105.094736L45.810526 401.515789c-40.421053 67.368421-40.421053 153.6 0 220.968422l164.378948 272.168421c37.726316 64.673684 107.789474 105.094737 185.936842 105.094736h342.231579c75.452632 0 145.515789-40.421053 185.936842-105.094736l164.378947-272.168421c40.421053-67.368421 40.421053-153.6 0-220.968422L921.6 129.347368c-37.726316-64.673684-107.789474-105.094737-185.936842-105.094736z"
                            fill="#0066FF" p-id="38232"></path>
                        <path
                            d="M565.894737 377.263158c75.452632 0 134.736842 59.284211 134.736842 134.736842s-59.284211 134.736842-134.736842 134.736842-134.736842-59.284211-134.736842-134.736842 59.284211-134.736842 134.736842-134.736842m0-80.842105c-118.568421 0-215.578947 97.010526-215.578948 215.578947s97.010526 215.578947 215.578948 215.578947 215.578947-97.010526 215.578947-215.578947-97.010526-215.578947-215.578947-215.578947z"
                            fill="#0066FF" p-id="38233"></path>
                    </svg>
                    <div class="option-text">系统设置</div>
                </div>
                <div class="divider">
                    <div class="border"></div>
                </div>
                <div v-if="admin" class="option" @click="goTo('/dataview')">
                    <svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="30" height="30">
                        <path d="M158.6 518.4l237.6 158.4 240.8-312.8 196.8 438.4-409.6 27.2-248.8-187.2-146.4 182.4z"
                            fill="#0066FF" />
                        <path d="M502.4 319.2l-33.6-24-162.4 236.8 46.4 32.8 140.8-194.4 67.2 97.6z" fill="#0066FF" />
                    </svg>
                    <div class="option-text">平台数据展示</div>
                </div>

            </div>
        </div>
        <!-- 工具栏 End -->
    </div>
</template>
<script>
export default {
    name: 'AppAside',
    data() {
        return {
            isCollapsed: false,
            admin: this.$store.state.setting.admin // 是否为管理员账户
        }
    },
    computed: {
        active: {
            get() {
                return this.$store.state.app.active;
            },
            set(val) {
                this.$store.dispatch('setActive', val);
            }
        },
        tabs: {
            // 获取历史聊天选项卡列表
            get() {
                return this.$store.state.app.tabs;
            },
            set(val) {
                this.$store.dispatch('setTabs', val);
            }
        },
        chats: {
            // 获取所有聊天内容
            get() {
                return this.$store.state.app.chats;
            },
            set(val) {
                this.$store.dispatch('setChats', val);
            }
        },

    },
    created() {

    },
    methods: {
        // 删除历史聊天选项卡
        delTab(uuid) {
            // 查询要删除的选项卡索引
            let index = this.tabs.findIndex(item => item.uuid === uuid);
            // 设置后续激活的选项卡uuid
            let active = '';

            if (this.tabs.length > 1) {
                let newIndex = index === (this.tabs.length - 1) ? index - 1 : index + 1;
                active = this.tabs[newIndex].uuid;
            }

            // 使用filter方法删除具有指定uuid的数据项 此时会触发get函数
            this.tabs = this.tabs.filter(item => item.uuid !== uuid);
            // 同时要删除对应的聊天数据 此时会触发get函数
            this.chats = this.chats.filter(item => item.uuid !== uuid);

            this.active = active;
        },
        /**
         * 选择聊天选项卡
         * @param uuid
         */
        pickTab(uuid) {
            // 判断当前是否为聊天页面 如果不是那么跳转到聊天页
            if (this.$router.currentRoute.value.name !== 'index') {
                this.goTo('/');
            }
            // 更新active
            this.active = uuid;
        },
        /**
         * 新页面
         */
        startNewChat() {
            // 判断当前是否为聊天页面 如果不是那么跳转到聊天页
            if (this.$router.currentRoute.value.name !== 'index') {
                this.goTo('/');
            }
            // 更新active
            this.active = '';
        },
        /**
         * 跳转页面函数
         * @param path
         */
        goTo(path) {
            this.$router.push(path)
        },
        /**
         * 格式化时间戳
         * @param timestamp
         * @returns {string}
         */
        formattedTime(timestamp) {
            // 将时间戳转换为Date对象
            const date = new Date(timestamp); // 乘以1000以将时间戳从秒转换为毫秒

            // 创建日期和时间格式化函数
            return date.toLocaleString('zh-CN', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit',
            });
        },

    }
}
</script>

<style lang="scss" scoped>
// 变量定义
// 变量定义
$animation-time: 0.3s;
$sidebar-width: 260px;
$gradient-start: #1e3c72;
$gradient-end: #2a5298;
$hover-bg-color: rgba(0, 0, 0, 0.1);
$shadow-color: rgba(0, 0, 0, 0.2);

// 容器样式
.container {
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 20px 20px 30px;
    align-items: center;
    background: linear-gradient(45deg, $gradient-start, $gradient-end);
    box-shadow: 0 2px 10px $shadow-color;
    padding: 20px;
    border-radius: 10px;

    /* 自定义滚动条 */
    ::-webkit-scrollbar {
        width: 8px;
        /* 滚动条宽度 */
    }

    ::-webkit-scrollbar-track {
        background: rgba(30, 60, 114, 0.2);
        /* 轨道颜色（基于gradient-start的透明色） */
        border-radius: 4px;
    }

    ::-webkit-scrollbar-thumb {
        background: linear-gradient(45deg, $gradient-start, lighten($gradient-start, 15%));
        border-radius: 4px;
        border: 1px solid rgba(255, 255, 255, 0.2);

        &:hover {
            background: linear-gradient(45deg, lighten($gradient-start, 5%), lighten($gradient-start, 20%));
        }
    }
}

// 上方Logo样式（保持原样）
.logo {
    display: flex;
    align-items: center;
    padding: 20px;
    font-family: 'Roboto', sans-serif;
    color: white;
    font-size: 1.5rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    flex-shrink: 0; // 防止压缩

    img {
        width: 40px;
        height: 40px;
        margin-right: 10px;
        transition: transform 0.3s ease-in-out;
    }

    img:hover {
        transform: rotate(360deg);
    }
}

// 创建新对话按钮（高度固定）
.newChatButton {
    width: 100%;
    margin-bottom: 15px;
    flex-shrink: 0; // 防止压缩

    .el-button {
        background-color: $gradient-start;
        color: white;
        border-radius: 25px;
        font-size: 1rem;
        padding: 10px;
        box-shadow: 0 2px 5px $shadow-color;
        transition: transform 0.3s, background-color 0.3s;

        &:hover {
            background-color: $gradient-end;
            transform: scale(1.05);
        }
    }
}

// 聊天选项卡样式（主要修改区域）
.chats {
    width: 100%;
    flex: 1 1 auto; // 关键：自动填充剩余空间
    overflow-y: auto;
    margin-bottom: 15px;
    padding-bottom: 10px; // 增加内边距防止滚动条覆盖
    padding-right: 4px;

    /* 给滚动条留出空间 */
    /* 更精细的滚动条定位 */
    &::-webkit-scrollbar {
        width: 6px;
        /* 比全局稍细 */
    }

    &::-webkit-scrollbar-thumb {
        background: linear-gradient(to bottom,
                lighten($gradient-start, 10%),
                lighten($gradient-end, 10%));
    }

    .session {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 15px; // 减小内边距
        margin-bottom: 8px; // 减小间距
        border-radius: 8px;
        background-color: rgba(255, 255, 255, 0.1);
        cursor: pointer;
        transition: all $animation-time ease;

        &.active {
            background-color: rgba(255, 255, 255, 0.3);
            box-shadow: 0 2px 10px $shadow-color;
        }

        &:hover {
            background-color: $hover-bg-color;
        }

        .title {
            color: white;
            font-size: 0.95rem; // 稍微减小字号
            font-weight: 500;
            text-transform: capitalize;
        }

        .time {
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #b0b0b0;
            font-size: 0.8rem; // 减小时间字号

            .btn-box {
                display: flex;
                justify-content: center;
                align-items: center;
                color: #1e3c72;

                .delete {
                    cursor: pointer;
                    padding: 4px; // 减小内边距
                    transition: color 0.3s;

                    &:hover {
                        color: #2a5298;
                    }
                }
            }
        }
    }
}

// 工具栏样式（缩小占比）
.optionBar {
    width: 100%;
    flex-shrink: 0; // 防止压缩
    margin-top: auto; // 关键：贴紧底部
    padding-top: 15px;
    padding: 15px 0 20px; // 增加底部padding（原只有top）
    min-height: 220px; // 确保有足够的最小高度

    .options {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 10px; // 减小选项间距

        .option {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 8px 0; // 减小内边距
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            cursor: pointer;
            transition: background-color 0.3s, transform 0.3s;

            &:hover {
                background-color: rgba(255, 255, 255, 0.2);
                transform: scale(1.05);
            }

            svg {
                width: 22px; // 缩小图标
                height: 22px;
                fill: #1e3c72;
                transition: fill 0.3s;
            }

            &:hover svg {
                fill: #2a5298;
            }

            .option-text {
                color: white;
                margin-left: 8px; // 减小间距
                font-size: 0.9rem; // 减小字号
            }

            .option:last-child {
                margin-bottom: 10px; // 为最后一个选项增加下边距
            }
        }

        .divider {
            width: 100%;
            height: 1px;
            background-color: rgba(255, 255, 255, 0.2);
            margin: 8px 0; // 减小间距
        }
    }
}
</style>